<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Key Event Test</title>
  <style>
    #stage
    {
      width: 600px;
      height: 400px;
      background: red;
    }
    #stage2
    {
      width: 600px;
      height: 400px;
      background: green;
    }
    #insideStage
    {
      width: 400px;
      height: 300px;
      background: yellow;
    }
  </style>
  <script>
    function $(id)
    {
      return document.getElementById(id);
    }
    function init()
    {

      document.body.addEventListener('keydown', function(e){
        console.log('key down', e.target.id, e.keyCode, e.charCode, e.key, e.code, e.shiftKey, e.ctrlKey, e.altKey, e.metaKey, e.repeat);
        console.log('event flags: ', 'cancelBubble: ', e.cancelBubble, 'bubbles: ', e.bubbles, 'cancelble: ', e.cancelable);
      });

      $('stage2').addEventListener('keydown', function(e){
        console.log('key down on stage 2', e.target.id, e.keyCode, e.charCode, e.key, e.code, e.shiftKey, e.ctrlKey, e.altKey, e.metaKey, e.repeat);
      });

      /*
      document.body.addEventListener('keypress', function(e){
        console.log('key press', e.keyCode, e.charCode, e.key, e.code, e.shiftKey, e.ctrlKey, e.altKey);
      });
      document.body.addEventListener('keyup', function(e){
        console.log('key up', e.keyCode, e.charCode, e.key, e.code, e.shiftKey, e.ctrlKey, e.altKey);
      });
      */

      /*
      document.body.addEventListener('keypress', function(e){
        console.log('key press', e.keyCode, e.charCode, e.key, e.code);
      });
      */

      document.body.addEventListener('focusin', function(e){
        console.log('focus', e.target.id);
      });
      document.body.addEventListener('focusout', function(e){
        console.log('blur', e.target.id);
      });
    }
  </script>
</head>
<body onload="init()" id="body1">
  <div id="stage" tabindex="0"></div>
  <div id="stage2" tabindex="0">
    <div>
      <div id="insideStage" tabindex="0"></div>
    </div>
  </div>
  <div id="stage3">
    <input id="inputText" type="text" placeholder="input something" />
    <input id="inputButton" type="button" value="Input Button">
    <button id="button1">Button</button>
  </div>
</body>
</html>